<template>
  <!-- 自定义组件--暂无数据 -->
  <view class="comp__nodata" :style="compStyle">
    <slot></slot>
    <view class="comp__nodata-text" v-if="text ? true : false" :style="{ 'color': color }">{{text}}</view>
    <view
      class="comp__nodata-sub-text"
      v-if="subText ? true : false"
      :style="{ 'color': subColor | color }"
    >{{subText}}</view>
    <button
      v-if="showBtn ? true : false"
      class="comp__nodata-btn"
      type="default"
      size="mini"
      @click="handleBtnClick"
    >{{btnText}}</button>
  </view>
</template>

<script>
export default {
  name: "no-data",

  props: {
    compStyle: String,

    text: {
      type: String,
      value: "暂无数据"
    },

    subText: {
      type: String,
      value: ""
    },

    btnText: {
      type: String,
      value: "重新加载"
    },

    showBtn: {
      type: Boolean,
      value: false
    },

    color: {
      type: String,
      default: "#999"
    },

    subColor: {
      type: String,
      default: "#f1f1f1"
    }
  },

  methods: {
    handleBtnClick() {
      this.$emit('btn-click');
    }
  }
};
</script>

<style lang="scss">
.comp__nodata {
  text-align: center;

  &-text {
    font-size: 26rpx;
  }

  &-sub-text {
    font-size: 24rpx;
    margin-top: 10rpx;
  }

  &-btn {
    font-size: 26rpx;
    margin-top: 40rpx;
    margin-bottom: 50rpx;
    width: 200px;
    font-size: 26rpx;
    margin-bottom: 20rpx;
    border: none;
    color: #fff !important;
    background: $page-main-color !important;
    line-height: 80rpx !important;

    &::after {
      content: "";
      display: none;
    }
  }
}
</style>
